<template>
    <view class="oreder-header">
        <search-bar :placeholderText="placeholderText" :actions="actions" @searchFn="searchFn" @actionFn="actionFn">
        </search-bar>
        <uni-drawer :width="320" ref="showRight" mode="right" :mask-click="true" class="drawer">
            <view class="drawer-view">
                <scroll-view class="drawer-scroll" scroll-y="true">
                    <view class="filter-item tag-item">
                        <text class="label">商品分类</text>
                        <view class="tags">
                            <text
                                class="tag-item"
                                v-for="(item, index) in CategoryList"
                                :class="{ selected: Categoryactive == index }"
                                @click="CategoryState(index)"
                                >{{ item.Name }}</text
                            >
                        </view>
                    </view>
                    <view class="filter-item tag-item">
                        <text class="label">产品线</text>
                        <view class="tags">
                            <text
                                class="tag-item text-show-line-1"
                                v-for="(item, index) in LineList"
                                :class="{ selected: Lineactive == index }"
                                @click="LineState(index)"
                                >{{ item.Name }}</text
                            >
                        </view>
                    </view>
                    <view class="filter-item tag-item">
                        <text class="label">商品类型</text>
                        <view class="tags">
                            <text
                                class="tag-item"
                                v-for="(item, index) in TypeList"
                                :class="{ selected: Typeactive == index }"
                                @click="TypeState(index)"
                                >{{ item.name }}</text
                            >
                        </view>
                    </view>
                    <view class="filter-item tag-item">
                        <text class="label">状态</text>
                        <view class="tags">
                            <text
                                class="tag-item"
                                v-for="(item, index) in SaleStatusList"
                                :class="{ selected: saleActive == index }"
                                @click="SaleStatusState(index)"
                                >{{ item.name }}</text
                            >
                        </view>
                    </view>
                    <view class="filter-item date-item" style="padding-bottom: 80rpx">
                        <text class="label">添加时间</text>
                        <view class="filter-date-time">
                            <text
                                class="date-time"
                                :class="filterData.startDate == '' ? 'data-time-ccc' : ''"
                                @click="openStarDate"
                                >{{ filterData.startDate == "" ? "请选择时间" : filterData.startDate }}</text
                            >
                            <text class="date-time-tip">至</text>
                            <text
                                class="date-time"
                                :class="filterData.endDate == '' ? 'data-time-ccc' : ''"
                                @click="openEndDate"
                                >{{ filterData.endDate == "" ? "请选择时间" : filterData.endDate }}</text
                            >
                        </view>
                    </view>
                </scroll-view>
                <view class="drawer-bottom-bar">
                    <button class="btn btn-reset" @click="cancelFilter">
                        <text>重置</text>
                    </button>
                    <button class="btn btn-set" @click="doFilter">
                        <text>确定</text>
                    </button>
                </view>
            </view>
        </uni-drawer>
        <uni-calendar
            :date="filterData.startDate"
            class="zindeup"
            ref="startDate"
            :insert="false"
            @confirm="confirmStarDate">
        </uni-calendar>
        <uni-calendar
            :date="filterData.endDate"
            class="zindeup"
            ref="endDate"
            :insert="false"
            @confirm="confirmEndDate"></uni-calendar>
    </view>
</template>

<script>
import searchBar from "@/pages_supplier/components/common/search-bar.vue"
import { GetInitSearchData } from "@/pages/api/product.js"
export default {
    props: {
        isReturn: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        "search-bar": searchBar,
    },
    data() {
        return {
            actions: [
                {
                    type: "icon-shaixuan",
                    id: 1,
                },
            ],
            placeholderText: "商品名称/商品编码",
            isShowFilter: false,
            searchValue: "",
            Categoryactive: -1,
            Lineactive: -1,
            Typeactive: -1,
            saleActive: -1,
            CategoryList: [],
            LineList: [],
            SaleStatusList: [],
            TypeList: [],
            filterData: {
                startDate: "",
                endDate: "",
                path: "0_2",
                lineId: -1,
                isFutures: -1,
                saleStatus: -1,
            },
        }
    },
    mounted() {
        this.getParam()
    },
    methods: {
        getParam() {
            GetInitSearchData().then((res) => {
                if (res.State == 1) {
                    this.CategoryList = res.Data.CategoryList
                    this.LineList = res.Data.LineList
                    this.SaleStatusList = res.Data.SaleStatusList
                    this.TypeList = res.Data.TypeList
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        CategoryState(index) {
            this.Categoryactive = index
            this.filterData.path = this.CategoryList[index].Path
            this.$forceUpdate()
        },
        LineState(index) {
            this.Lineactive = index
            this.filterData.lineId = this.LineList[index].ID
            this.$forceUpdate()
        },
        TypeState(index) {
            this.Typeactive = index
            this.filterData.isFutures = this.TypeList[index].ID
            this.$forceUpdate()
        },
        SaleStatusState(index) {
            this.saleActive = index
            this.filterData.saleStatus = this.SaleStatusList[index].ID
            this.$forceUpdate()
        },
        searchFn(searchText) {
            //搜索
            this.$emit("searchFn", searchText)
        },
        actionFn(actionItem) {
            //功能点击
            this.$refs.showRight.open()
        },
        filterOpen() {
            this.$refs.showRight.open()
        },
        filterClose() {
            this.$refs.showRight.close()
        },
        filterAction() {
            //弹出、关闭筛选
            this.isShowFilter = !this.isShowFilter
            // if (this.isShowFilter) {
            // 	this.$refs.filterPopup.close()
            // } else {
            // 	this.$refs.filterPopup.open()
            // }
        },
        changeFilterPopup(value) {
            //弹出、关闭筛选回调
            this.isShowFilter = value.show
        },
        changeSearchValue(value) {
            //搜索关键字回调
            this.searchValue = value
        },
        getString(value) {
            //转为string
            return value.toString()
        },
        openStarDate() {
            //打开选择开始日期
            this.$refs.startDate.open()
        },
        confirmStarDate(e) {
            //选择开始日期
            this.filterData.startDate = e.fulldate
        },
        openEndDate() {
            //打开选择结束日期
            this.$refs.endDate.open()
        },
        confirmEndDate(e) {
            //选择结束日期
            this.filterData.endDate = e.fulldate
        },
        cancelFilter() {
            //重置筛选
            this.filterData = {
                startDate: "",
                endDate: "",
                path: "0_2",
                lineId: -1,
                isFutures: -1,
                saleStatus: -1,
            }
            this.Categoryactive = -1
            this.Lineactive = -1
            this.Typeactive = -1
            this.saleActive = -1
        },
        doFilter() {
            //提交筛选
            console.log(this.filterData)
            this.$emit("doFilter", this.filterData)
            this.$refs.showRight.close()
        },
    },
}
</script>

<style lang="scss">
.filter-main {
    display: flex;
    flex: 1;
    background: $color-white;
    padding: $app-page-padding;
    flex-direction: column;

    .filter-item {
        margin-bottom: 30rpx;

        .item-title {
            margin-bottom: 30rpx;
        }
    }

    .filter-date-tag {
        margin-bottom: 50rpx;
        display: flex;
        flex-direction: row;

        .tag-item {
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
            margin-left: 30rpx;

            &:first-child {
                margin-left: 0;
            }
        }

        .selected {
            text {
                color: $app-color-main;
                border: 1rpx solid $app-color-main;
            }
        }
    }

    .radio-group {
        display: flex;
        flex-direction: row;
        align-items: center;

        .radio-label {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-right: 20rpx;

            .radio {
                transform: scale(0.8);
            }
        }
    }
}

.filter-action .btn {
    font-size: 28rpx;
}

.filter-date-time {
    display: flex;
    flex-direction: row;
    padding-top: 30rpx;

    .date-time {
        display: flex;
        flex: 1;
        justify-content: center;
        font-size: 28rpx;
        color: #000000;
    }

    .data-time-ccc {
        color: $app-color-text-tip;
    }
}
.drawer-scroll {
    display: initial;
}
.text-show-line-1 {
    display: block !important;
    white-space: nowrap;
    line-height: 72rpx;
    text-align: center;
}
</style>
